<template>
  <div>
    <div class="invitate" v-if="qrCodeUrl">
      <div class="top-box">
        <div>{{ tipsText[0] }}</div>
        <div>{{ tipsText[1] }}</div>
      </div>
      <div class="tips-box">
        已成功邀请
        <text class="number"> {{ pageData.user_total }}</text
        >位好友
      </div>
      <div class="rule-btn" @click="showRules"></div>
      <div class="btn-box">
        <img :src="qrCodeUrl" class="img-size-100" />
        <img :src="userInfo.avatar" class="avatar-img" />
      </div>
      <div class="footer-box">
        <div class="main">
          <button class="btn" open-type="share">直接分享</button>
          <button class="btn" @click="toSaveImage">海报分享</button>
        </div>
      </div>
      <van-popup
        :show="isShowRules"
        @close="isShowRules = false"
        round="10"
        closeable="true"
      >
        <div class="rule-main">
          <div class="title"></div>
          <div class="main">
            <div class="txt">
              1.
              您邀请的好友将”终身“绑定到您会员团队中，TA在平台的所有消费您都可获得分佣。
            </div>
            <div class="txt">
              2.您的好友再邀请的会员也将成为您的间接会员，间接会员在平台的所有消费您也同时获得分佣。
            </div>
            <div class="txt">
              3.当您邀请的人数达到{{
                pageData.share_upgrade
              }}个会员后，您将自动晋级为”中佣达人“，中佣达人将获得更多的消费返币。
            </div>
            <div class="txt">
              4.如有疑问请联系美时汇客服。
            </div>
          </div>
        </div>
      </van-popup>
    </div>

    <invitateCanvas ref="invitateCa" :shareInfo="shareInfo" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import Share from "@/common/share";
import invitateCanvas from "../../components/invitate-canvas";
export default {
  components: { invitateCanvas },
  data() {
    return {
      shareCode: "",
      pageData: {},
      specsIndex: 0,
      qrCodeUrl: "",
      isShowRules: false //是否显示规则
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    shareInfo() {
      let { user_total, share_amount } = this.pageData;
      return { user_total, share_amount, qrCodeUrl: this.qrCodeUrl };
    },
    tipsText() {
      let amount = this.pageData.share_amount;
      return amount > 0
        ? ["加入美时汇", `您的好友将获得${amount}个币`]
        : ["来跟我一起", "玩转美粉币吧"];
    }
  },
  async onLoad() {
    this.getShare();
    const shareCode = await Share.getShareCode();
    this.getShareInviteCode(shareCode);
  },
  onShareAppMessage(res) {
    let { avatar, nick_name, id } = this.userInfo;
    return Share.getShareId({
      from: res.from,
      shareLink: `pages/invitate/invitateUser`,
      shareTitle: "邀请好友获返币"
    });
  },
  methods: {
    toSaveImage() {
      Share.getShareId({
        from: "button",
        shareLink: `pages/invitate/invitateUser`,
        shareTitle: "邀请好友获返币"
      });
      this.$refs.invitateCa.toSaveImage();
    },
    getShareInviteCode(share_code) {
      return this.$api
        .getShareInviteCode({ share_code, page: "pages/invitate/invitateUser" })
        .then(res => {
          if (res.code == 200) {
            this.qrCodeUrl = res.data.url;
            return res.data.url;
          }
        });
    },
    getShare() {
      this.$api.getShare().then(res => {
        if (res.code == 200) {
          this.pageData = res.data;
        }
      });
    },
    showRules() {
      this.isShowRules = true;
    }
  }
};
</script>

<style lang="scss">
.invitate {
  min-height: 100vh;
  overflow: hidden;
  background: #3f39b6
    url(https://media.wxcwy.com/images/yqhy-bkt.png)
    no-repeat center top;
  background-size: 100% 1448rpx;
  box-sizing: border-box;
  padding-top: 455rpx;
  .top-box {
    text-align: center;
    color: #d70002;
    font-size: 32rpx;
    font-weight: 500;
    .tips {
      font-size: 60rpx;
      font-weight: bold;
    }
  }
  .tips-box {
    margin: 76rpx 0 252rpx;
    text-align: center;
    color: #ffffff;
    font-size: 32rpx;
    line-height: 45rpx;
    .number {
      color: #fde403;
      font-size: 44rpx;
      font-weight: bold;
    }
  }
  .btn-box {
    display: block;
    margin: 0 auto;
    width: 280rpx;
    height: 280rpx;
    position: relative;
    background: linear-gradient(
      180deg,
      rgba(58, 43, 173, 1) 0%,
      rgba(27, 19, 117, 1) 100%
    );
    .avatar-img {
      width: 126rpx;
      height: 126rpx;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 10;
    }
  }
  .rule-btn {
    height: 60rpx;
    position: absolute;
    top: 680rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200rpx;
  }
  .rule-main {
    width: 600rpx;
    box-sizing: border-box;
    padding: 40rpx 30rpx;
    overflow: hidden;
    color: #666666;
    font-size: 28rpx;
    line-height: 40rpx;
    border-radius: 20rpx;
    .title {
      margin: 0 auto 40rpx;
      width: 239rpx;
      height: 34rpx;
      background: url(https://media.wxcwy.com/mini/images/gz_title@2x.png) no-repeat center center;
      background-size: 100% 100%;
    }
    .main {
      overflow: hidden;
      .txt {
        margin-bottom: 20rpx;
      }
    }
  }
  .close-btn {
    margin: 40rpx auto 0;
    width: 64rpx;
    height: 64rpx;
    background: url(https://media.wxcwy.com/mini/images/win_close@2x.png) no-repeat center center;
    background-size: 100% 100%;
  }
  .footer-box {
    height: 128rpx;
    .main {
      position: fixed;
      width: 100%;
      height: 128rpx;
      bottom: 40rpx;
      left: 0;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      .btn {
        width: 315rpx;
        height: 88rpx;
        line-height: 88rpx;
        box-sizing: border-box;
        border-radius: 55rpx;
        // border: 1px solid #1772ff;
        background: linear-gradient(
          90deg,
          rgba(55, 136, 255, 1) 0%,
          rgba(127, 60, 231, 1) 100%
        );
        color: #fff;
        font-size: 36rpx;
        font-weight: bold;
        margin: 0 10rpx;
        text-align: center;
        color: #fff;
      }
    }
  }
}
</style>
